<template>
  <el-dialog title="大屏排版" :visible.sync="dialogVisible" append-to-body width="65%" class="visualization-dialog">
    <el-row :gutter="20">
      <el-col :span="12" v-for="item in list" :key="item.id">
        <el-card class="card mb10">
          <div class="absolute radio">
            <el-radio v-model="value" :label="item.cardComponentName"></el-radio>
          </div>
          <component :is="item.cardComponentName" :info="info" />
        </el-card>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleUpdate">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import agricultureApi from '@/api/agriculture'
import Zl from '@/views/agriculture/components/Zl'
import Cbjtqk from '@/views/agriculture/components/Cbjtqk'
import Jyhqk from '@/views/agriculture/components/Jyhqk'
import Fwzx from '@/views/agriculture/components/Fwzx'
import Jyhnzwzzqk from '@/views/agriculture/components/Jyhnzwzzqk'
import Lnzzqst from '@/views/agriculture/components/Lnzzqst'
import Ptfwsj from '@/views/agriculture/components/Ptfwsj'

export default {
  name: 'VisualizationDialog',
  components: { Zl, Cbjtqk, Jyhqk, Fwzx, Jyhnzwzzqk, Lnzzqst, Ptfwsj },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    cardSize: {
      type: String | Number,
      default: ''
    },
    info: {
      type: Object,
      default: () => {}
    },
    name: {
      type: String,
      default: ''
    },
    componentName: {
      type: String,
      default: ''
    }
  },
  computed: {
    dialogVisible: {
      get() {
        if (this.visible) this.getList()
        return this.visible
      },
      set(value) {
        this.$emit('update:visible', value)
      }
    }
  },
  watch: {
    componentName: {
      handler(val) {
        if (val) this.value = val
      },
      immediate: true
    }
  },
  data() {
    return {
      list: [],
      value: ''
    }
  },
  methods: {
    getList() {
      agricultureApi.personalVisualizationCardList({ visualizationType: 100 }).then((res) => {
        this.list = res.data.filter((e) => e.cardSize == this.cardSize)
      })
    },
    handleUpdate() {
      this.$emit('onChange', { [this.name]: this.value })
    }
  }
}
</script>

<style lang="scss" scoped>
.visualization-dialog {
  ::v-deep .el-dialog__header {
    background-color: #07092a;
    background-size: 100% 100%;
    padding: 10px 10px 20px 10px !important;
    background-image: url('https://emindt-scheduling.oss-cn-hangzhou.aliyuncs.com/profile/personinfo/2023/6/20/lang1_6f9c554d85264771ab9d2bf58285a2d1.png');
  }

  ::v-deep .el-dialog__body {
    background: #07092a;
  }

  ::v-deep .el-dialog__header .el-dialog__title {
    font-weight: bold !important;
    color: #00cdff !important;
  }

  ::v-deep .el-dialog__footer {
    background: #07092a;
  }

  ::v-deep .el-card {
    border: 1px solid #3f51b5 !important;
  }

  .card {
    ::v-deep .el-card__body {
      position: relative !important;
      background: #07092a;
      color: #fff;
    }

    .radio {
      top: 15px;
      right: 10px;

      ::v-deep .el-radio__label {
        display: none !important;
        scale: 1.5;
      }
    }
  }
}
</style>